<template>
  <view :class="[theme, 'f1 oh height-100percent']">
    <view class="relative">
      <u-image width="100%" height="464" src="/static/img/banner-ranking.png" />

      <view class="absolute color-2 jc-center" style="top: 60rpx; right: 60rpx; bottom: 60rpx; left: 60rpx;">
        <text class="fw-700 fs-50">{{ mapRankingType[type as 1 | 2].title }}</text>
        <text class="mt-30 fs-28">{{ mapRankingType[type as 1 | 2].subtitle }}</text>
      </view>
    </view>

    <view class="f1 br-16 oh"
      style="z-index: 1; width: auto; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(6rpx); margin: -60rpx 30rpx 30rpx; box-shadow: 0 0 20rpx 0 rgba(0,0,0,0.1);">
      <view class="fd-row fs-26 ai-center text-center" style="height: 90rpx;">
        <text class="f2 ml-12 mr-12 width-60">排行</text>
        <text class="f2">头像</text>
        <text class="f3 ml-12 mr-12">昵称</text>
        <text class="f3 mr-12">数量</text>
      </view>

      <scroll-view scroll-y class="f1 oh" @scrolltolower="getData">
        <view>
          <view v-for="(item, index) in rankings.list" class="fd-row ai-center"
            style="height: 120rpx; border-bottom: 2rpx dashed rgba(151,151,151,0.1);">
            <view class="f2 ml-12 mr-12 ai-center">
              <u-image v-if="index < 3" width="60" height="60" :src="`/static/img/ranking/${index + 1}.png`" />
              <text v-else class="color-9">{{ index + 1 }}</text>
            </view>
            <label class="f2 jc-center">
              <u-image radius="50%" width="80" height="80" :src="item.avatar" />
            </label>
            <text class="f3 ml-12 mr-12 text-center ellipsis color-9">
              {{ item.nickname || "-" }}
            </text>
            <text class="f3 text-center ellipsis color-15 fw-700 fs-32">
              {{ item.number || "0.00" }}
            </text>
          </view>
          <view class="ai-center mt-30 mb-30">
            <u-image v-if="!rankings.list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
              src="/static/img/blank.png" mode="aspectFit" />
            <u-loadmore :status="rankings.cache.status" />
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { pager } from "@/common/libs/utils";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);

const mapRankingType = {
  1: {
    title: "直推榜",
    subtitle: "拉新直推粉丝数量排行榜"
  },
  2: {
    title: "能源榜",
    subtitle: "能源收益排行榜"
  }
};
const rankings = reactive({
  page: 0,
  limit: 21,
  list: [] as any[],
  cache: {
    page: 1,
    list: [] as any[],
    status: "noMore"
  },
  next: false,
});

let type = ref(1);

onLoad(({ rankingType }: any) => {
  rankingType && (type = rankingType);
  getData();
});

onReachBottom(() => getData());

onPullDownRefresh(() => {
  Object.assign(rankings, {
    page: 0,
    limit: 21,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "noMore"
    },
    next: false,
  });
  getData();
  setTimeout(uni.stopPullDownRefresh, 360);
});

const getData = () => {
  pager({ url: "/leaderBoard", data: { type } }, rankings, "");
}

</script>

<style>
page {
  height: 100%;
  background-color: #fdfdfd;
}
</style>